{% extends "core.html" %}
{% load ahmia_custom %}
{% load i18n %}
{% load static %}

{% block title %}Ahmia - Usage Statics{% endblock %}

{% block extra_js %}
    <noscript>
        <p>Please enable JavaScript to view these statistics.</p>
    </noscript>
    <script type="text/javascript" src="{% static 'js/canvasjs.min.js' %}"></script>
{% endblock %}

{% block body %}

    <div id="usage-stats">

        <h2> Daily Usage Statistics </h2>

        <p align="justify">
            The following plots display the evolution of each metric over the past days.
            These metrics represent the total number of search queries and result clicks
            made each day, both on Tor Network Search, and I2P Network search.
        </p>

        <h3 id="tor-header"> Tor Network </h3>

        <div class="plot" style="display: block;">
                <img src="{% static "stats/tor_queries.png" %}" alt="search queries plot"/>
        </div>

        <div class="plot" style="display: block;">
                <img src="{% static "stats/tor_clicks.png" %}" alt="search queries plot"/>
        </div>

        <h3 id="i2p-header"> I2P Network </h3>

        <div class="plot" style="display: block;">
                <img src="{% static "stats/i2p_queries.png" %}" alt="search queries plot"/>
        </div>

{#        <div class="plot" style="display: block;">#}
{#                <img src="{% static "stats/i2p_clicks.png" %}" alt="search queries plot"/>#}
{#        </div>#}

        <div id="footer">
            <i>The page is being updated frequently</i>
        </div>
    </div>
{% endblock %}

{## todo
* Use image sprites or base64 encoding to avoid multiple (4 instead of 1)
requests to download the images (png files)
* Remove commented code if we dont present under construction images
#}
